<template>
    <div class="home">
        <ul class="video-list-header">
            <li v-for="(item,index) in videoStyle" :key="index" @click="handleChangeView(item.styleid)"
            :class="{active:item.name===activeName}">
                {{item.name}}

            </li>
        </ul>
        <div class="section" v-for="(item,index) in videoList"  :key="index">
            <div class="section-title">{{item.name}}
            </div>
            <el-row>
                <el-col :span="24">
                    <el-card :body-style="{ padding: '0px'} " class="card">
                        <img :src="item.logo" class="image">
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">
                                <P>{{item.info}}</P>
                                <time class="time">{{ item.addtime}}</time>
                                <el-button type="text" class="button" @click="goplay(item.url,item.videoid)">
                                    播放
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"

                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="videoList.length"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>

    import Swiper from "../components/Swiper";
    // import contentList from "../components/ContentList"
    import {getAllVideoList,getVideoListOfStyle} from "../api";
    import {mapGetters} from 'vuex'
    import video from "../store/video";
    import {videoStyle} from "../assets/data/videoList";

    export default {
        name: "classify",
        components:{
            Swiper,
            // contentList
        },
        data(){
            return{
                currentDate: new Date(),
                videoList:[],
                findList:[],
                pageSize:15,
                currentPage:1,
                videoStyle:[], //风格
                activeName:'全部视频'


            }
        },
        computed:{
            data(){
               return this.videoList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
            }
        },

        created() {
            this.videoStyle=videoStyle;
            this.getAllVideoList()


        },
        methods:{
            //提示信息
            notify(title,type){
                this.$notify({
                    title:title,
                    type:type
                })
            },
            getAllVideoList(){
                getAllVideoList().then((res)=>{
                    this.videoList=res.data.videolist;
                    //console.log(res.data.videolist)

                }).catch((err)=>{
                    console.log(err)
                })
            },
            //获取当前页
            handleCurrentChange(val){
                this.currentPage=val;
            },
            //分类显示
            handleChangeView(styleid){
                this.activeName=name;
                this.videoList=[];
                //this.findList=[];
                if (styleid===0){
                   // console.log(this.videoList)
                    this.getAllVideoList()
                }else{
                    //console.log(this.videoList)
                    this.goVideoListOfStyle(styleid)
                }

            },
            //查询
            goVideoListOfStyle(styleid){
                getVideoListOfStyle(styleid).then((res)=>{

                    this.currentPage=1;
                   // console.log(this.videoList)
                    this.videoList=res.data.findvideo;
                    //console.log(res.data.findvideo)
                    //console.log(this.videoList)

                }).catch((err)=>{
                    console.log(err)
                })

            },
            goplay(url,videoId){

                this.$router.push({path:'/play',query:{videourl: url,videoid:videoId}
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/home.scss";


    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }
    .card{
        width: 100%;
    }
    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }


    .video-list-header {
        width: 100%;
        padding: 0 40px;
        li {
            display: inline-block;
            line-height: 40px;
            margin: 40px 20px 15px 20px;
            font-size: 20px;
            font-weight: 400;
            color: $color-grey;
            border-bottom: none;
            cursor: pointer;
        }
        li.active {
            color: $color-black;
            font-weight: 600;
            border-bottom: 4px solid $color-black;
        }
    }


</style>